<template>
    <div class="examiner_info">
        <title-back title="考务人员信息"></title-back>
        <!-- 考务人员信息 -->
        <div class="examinee_list">
            <div class="dis-flex examinee_list_filtrate">
                <p class="examiner_name">廖奕炯</p>
                <p class="examiner_phone">13242012445</p>
                <p class="examiner_id_num">441522199411920030</p>
                <p class="examiner_open">
                    <button @click="information_alter_show = true">修改信息</button>
                    <button @click="password_reset_show = true">设置密码</button>
                </p>
            </div>
            <div class="examinee_list_table">
                <Table border ref="selection" @on-selection-change="tabSelect" :columns="columns4" :data="dataList">
            </Table>
            </div>
        </div>
        <div class="back">
            <button class="back_btn" @click="back">返回</button>
        </div>
        <!-- 考务人员信息修改 -->
        <Modal v-model="information_alter_show" title="考务人员信息修改" @on-ok="information_alter_ok" @on-cancel="information_alter_cancel">
            <div class="dis-flex form_wrapper">
                <div class="form_left">
                    <Form :model="information_alter" label-position="left" :label-width="70">
                        <FormItem label="姓名">
                            <Input v-model="information_alter.name"></Input>
                        </FormItem>
                        <FormItem label="身份证号">
                            <Input v-model="information_alter.id_num"></Input>
                        </FormItem>
                        <FormItem label="手机号码">
                            <Input v-model="information_alter.phone"></Input>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </Modal>
        <!-- 考务人员密码设置 -->
        <Modal v-model="password_reset_show" title="考务人员密码设置" @on-ok="password_reset_ok" @on-cancel="password_reset_cancel">
            <div class="dis-flex add_examinee_wrapper">
                <Form :model="password_reset" label-position="left" :label-width="140">
                    <FormItem label="旧密码">
                        <Input v-model="password_reset.old_password"></Input>
                    </FormItem>
                    <FormItem label="新密码">
                        <Input v-model="password_reset.new_password"></Input>
                    </FormItem>
                    <FormItem label="再次输入新密码">
                        <Input v-model="password_reset.againnew_password"></Input>
                    </FormItem>
                 </Form>
            </div>
        </Modal>
    </div>
</template>

<script>
    import titleBack from "../../common/title_back.vue"
    export default {
        components: {
            titleBack
        },
        data() {
            return {
                information_alter_show: false,
                password_reset_show: false,
                /* 考务人员信息修改 */
                information_alter: {
                    name: "",
                    id_num: "",
                    phone: "",
                },
                /* 考务人员密码设置 */
                password_reset: {
                    old_password: "",
                    new_password: "",
                    againnew_password: ""
                },
                columns4: [
                    {
                        title: '项目名称',
                        key: 'name',
                    },
                    {
                        title: '项目当前进度',
                        key: 'sign_status',
                        width: '140'
                    },
                    {
                        title: '分配角色1',
                        key: 'assign_roles1',
                    },
                    {
                        title: '分配角色2',
                        key: 'assign_roles2',
                    },
                    {
                        title: '分配角色3',
                        key: 'assign_roles3',
                    }
                ],
                dataList: [
                    {
                        name: "2020年观澜街道办招募社会临聘人员考试",
                        sign_status: "已结束",
                        assign_roles1: "初审员（分配人数：321，审核人数：300，通过人数：220人）",
                        assign_roles2: "巡考员",
                        assign_roles3: "监督员"

                    },
                    {
                        name: "2020年龙华街道办招募社会临聘人员考试",
                        sign_status: "已结束",
                        assign_roles1: "初审员（分配人数：321，审核人数：300，通过人数：220人）",
                        assign_roles2: "巡考员",
                        assign_roles3: "监督员"

                    },
                    {
                        name: "2020年龙华街道办招募社会临聘人员考试",
                        sign_status: "已结束",
                        assign_roles1: "初审员（分配人数：321，审核人数：300，通过人数：220人）",
                        assign_roles2: "巡考员",
                        assign_roles3: "监督员"

                    }
                ]
            }
        },
        methods: {
            back() {
                this.$router.go(-1)
            },
            tabSelect() {

            },
            information_alter_ok () {
                this.$Message.info('设置成功');
            },
            information_alter_cancel () {
                this.$Message.info('取消了设置');
            },
            password_reset_ok () {
                this.$Message.info('设置成功');
            },
            password_reset_cancel () {
                this.$Message.info('取消了设置');
            }
        }
    }
</script>

<style lang="less" scoped>
.examiner_info {
    padding: 0 15px;
    /* 考务人员信息 */
    .examinee_list {
        .examinee_list_filtrate {
            border:1px solid #ccc;
            justify-content: space-between;
            align-items: center;
            font-size: 36px;
            line-height: 46px;
            .examiner_open {
                font-size: 14px;
                line-height: 16px;
                button {
                    width: 140px;
                    margin-right: 15px;
                }
            }
        }
        .examinee_list_table {
            margin-top: 20px;
        }
    }
    .back {
        padding: 20px 0;
        .back_btn {
            width: 140px;
            line-height: 16px;
        }
    }
}
    /* 准考证设置弹出框 */
    .form_wrapper {
        .form_left {
            margin-right: 20px;
        }
    }
</style>